import { useState, useEffect, useRef } from "react"
function App() {
    // useState：是一个普通的方法，执行后返回一个数组，
    // 第一值：状态/数据
    // 第二值：更新状态的方法
    // 5 ：num默认参数
    const [num, setnum] = useState(5);
    const [size, setSize] = useState(20);
    // 挂载完毕时调用
    useEffect(() => {
        console.log("组件挂在完毕！")
    }, [])
    // 更新完毕时调用
    useEffect(() => {
        console.log("组件更新完毕！")
    })
    // 监听数据的变化，
    //第一个值，箭头函数：
    //    监听数据变化时 执行的函数
    // 第二个值，数组（可多个监听）
    //    需要监听的数据 
    useEffect(() => {
        console.log("监听：num发生变化了！", num)
    }, [num])

    // 创建dom引用
    const inpref = useRef();
    function showMsg() {
        alert(inpref.current.value)
        console.log(inpref.current)
        /*
        inpref.current  :  DOM节点，标签
        inpref.current.value  :  input的value值
        */
    }
    return (<div>
        <h1>hooks</h1>
        <button onClick={() => { setnum(num + 1) }}>{num}</button>
        <button onClick={() => { setSize(size + 1) }}>siz的值：{size}</button><br />
        <input type="text" ref={inpref} />
        <button onClick={showMsg}>显示表单内容</button>
    </div>);
}

export default App;